<template>
  <div>
      <ul>
          <li><a href="./">首页</a></li> >
          <li>商品页面</li>
      </ul>
      <el-upload
        class="upload-demo"
        v-if="iShowInput"
        :action="url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        name="productFile"
        :on-success="upload"
        :on-error="error"
        style="width:300px"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传模板文件</div>
    </el-upload>
      <!-- <input type="file" id="inputFile" @change="getFile($event)" > -->
      <!-- <button id="submitFile" @click="upload">提交</button> -->
      <a href='http://47.94.87.1/templet.xlsx' download="templet">模板下载</a>
      <div id="productsList">
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column v-for="(item,index) in tableData[0]" :key="item.id" :prop="index" :label="transTo(index)" width="170" >
                    <template slot-scope="scope" >
                        <img :src="scope.row.picture" v-if="index == 'picture'"/>
                        <template v-else>{{scope.row[index]}}</template>
                    </template>
                </el-table-column>
              </el-table>
      </div>
  </div>
</template>
<script>
export default {
  data(){
      return {
          fileList:[],
          url:'http://'+this.IP+'/api/upload.php',
          tableData:[],
          nameList: {},
          iShowInput:sessionStorage.getItem('name') == 'guo'
      }
  },
  created(){
    if(sessionStorage.getItem('name') && sessionStorage.getItem('loginkey')){
        var params = new URLSearchParams();
        params.append('name', sessionStorage.getItem('name'));
        params.append('loginkey', sessionStorage.getItem('loginkey'));
    
          this.$http.post("http://"+this.IP+"/api/getProducts.php",params)
          .then((res)=>{
            //   console.log(res.data)
            if(!res.data.code){
                this.tableData = res.data;
                console.log(this.tableData)
            }else{
                this.$message.error(res.data.msg);
            }
          })
    
          var tableNames=[
                'Collection Name',
                'SKU',
                'EAN CODE',
                'Design ID',
                'Supplier Design ID',
                'Quality类别代码',
                'Picture',
                'Weight/Sqm (Kgs)',
                'Gross Weight',
                'width',
                'height',
                'length',
                'Dimensions(W*H*L) ',
                'Color Map',
                'Size',
                'FOB Price/Sqm',
                'FOB Price/PCS',
                'Warehouse Cost/SQM',
                'Warehouse Cost/PC',
                'Wholesale Prices/sqm',
                'Wholesale Prices/PCS',
                'Commision/sqm',
                'Commision/PCS',
                'Barcode Files',
                '建议零售价',
                '售价',
                'Sqm',
                'Material',
                'Pile Height',
                'Origin',
                '是否阻燃',
                '是否掉色',
                '是否防静电',
                '是否防水',
                '是否防霉',
                'Resilience(回弹性能）',
                'Non Shedding',
                '柔软舒适度',
                '背部工艺',
                '是否可水洗',
                '是否有异味'
          ]
          var sqlNames=[
            'collectionname',
            'sku',
            'eancode',
            'desiginid',
            'supplierdesignid',
            'qualityid',
            'picture',
            'weight',
            'grossweight',
            'width',
            'height',
            'length',
            'dimensions',
            'colormap',
            'size',
            'fobpricesqm',
            'fobpricepcs',
            'warehousecostsqm',
            'warehousecostpcs',
            'wholesalepricesqm',
            'wholesalepricepcs',
            'commisionsqm',
            'commisionpcs',
            'barcodefiles',
            'retailprice',
            'saleprice',
            'material',
            'pileheight',
            'origin',
            'isburn',
            'iscolor',
            'iselectric',
            'iswater',
            'ismildew',
            'resilience',
            'nonshedding',
            'isslippery',
            'soft',
            'back',
            'iswash',
            'issmell'
          ]
    
          for(var i=0;i<tableNames.length;i++){
              this.nameList[sqlNames[i]] = tableNames[i]
          }
    }else{
        this.$router.push('/login')
    }
  },
  methods:{
      transTo(str){
          return this.nameList[str];
      },
      getFile(e){
          this.upfile = e.target.files[0];
      },
      error(err, file, fileList){
          console.log(err)
      },
      upload(res,file,fileList){
        //   var file = new FormData();
        //   file.append('productFile',this.upfile);
        //   let config = {
        //         headers:{ 'Content-Type': 'multipart/form-data' }
        //       };

        //   this.$http.post('http://'+this.IP+'/api/upload.php',file,config)
        //     .then((res)=>{
        let result = res.data;
        this.$message({
            message: '上传成功',
            type: 'success'
        });
        //     })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  }
}
</script>
<style scoped>
  #inputFile{
      width: 150px;
  }
  #submitFile{
      margin-right: 40px
  }
  talbe{
      border: 1;
  }
  td{
      width: 300px;
      height: 100px;
      display: inline-block;
      text-align: center;
      line-height: 30px;
  }
  ul{
      margin: 20px 0;
      font-size: 14px;
      color: #aaa
  }
  li{
      display: inline;
  }
  li a{
      text-decoration: none;
  }
  img{
      width: 170px;
      height: 170px;
      margin-left: -10px;
  }
</style>
